<template>
    <div id="view_service" class="home-page-contianer">
        <n-tabs
            class="home-page-tabs"
            type="line"
            animated
            :value="compControl.tab_control.activeName"
            :on-before-leave="compControl.tab_control.handleSwitchPane">

            <n-tab-pane name="service" tab="服务状态">
                <n-scrollbar class="tab-scroller">
                    <pre v-html="compControl.tabs.systemctl.disp_text"></pre>
                    <p v-if="!compControl.tabs.systemctl.disp_text"></p>
                </n-scrollbar>
            </n-tab-pane>
            <n-tab-pane name="log" tab="日志文本">
                <n-scrollbar class="tab-scroller">
                    <pre v-html="compControl.tabs.log.disp_text"></pre>
                </n-scrollbar>
            </n-tab-pane>
            <p v-if="compControl.tabs.systemctl.disp_text==''" style="text-align: center;">没有日志哦</p>
        </n-tabs>
    </div>
</template>

<script setup lang="ts">
import axiosInstance from '@/utils/network/axios'
import { onMounted, reactive } from 'vue'

const compControl = reactive({
    tab_control: {
        activeName: 'service',
        handleSwitchPane(name: string, _oldname: string) {
            if (name == 'dashboard') {
            } else if (name == 'service') {
                compControl.tabs.systemctl.getSystemctlStatus()
            } else if (name == 'log') {
                compControl.tabs.log.getLog()
            }
            compControl.tab_control.activeName = name
        }
    },
    tabs: {
        dashboard: {},
        systemctl: {
            disp_text: '',
            async getSystemctlStatus() {
                const response = await axiosInstance.get(`/home/service-control?name=vsftpd`)
                let text: string = response.data
                text = text.replace(/(enabled)/g, '<span class="green">enabled</span>')
                text = text.replace(/(active)/g, '<span class="green">active</span>')
                text = text.replace(/(running)/g, '<span class="green">running</span>')
                text = text.replace(/(loaded)/g, '<span class="grey">loaded</span>')
                if (text.indexOf('active') != -1) {
                    text = text.replace(/(●)/g, '<span class="green">●</span>')
                } else {
                    text = text.replace(/(●)/g, '<span class="red">●</span>')
                }

                compControl.tabs.systemctl.disp_text = text
            }
        },
        log: {
            disp_text: '',
            async getLog() {
                axiosInstance.get(`/home/service-log?name=vsftpd`).then((response) => {
                    compControl.tabs.log.disp_text = response.data
                })
            }
        }
    }
})
onMounted(() => {
    compControl.tab_control.handleSwitchPane(compControl.tab_control.activeName, '')
})
</script>

<style lang="scss">
#view_service {
    //padding: 0.5rem;

    .n-card-header {
        padding-bottom: 0;
    }
    .n-card__content {
        padding-top: 0.25rem;
        //padding-bottom: 0;
    }
    .green {
        color: green;
        font-weight: bold;
    }
    .red {
        color: red;
        font-weight: bold;
    }
    .grey {
        color: grey;
        font-weight: bold;
    }
}
</style>
